<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  // const { reactive, watchEffect, createApp, ref } = Vue;

  /**
   * vue3处理数组响应式的时候，重写了'includes', 'indexOf', 'lastIndexOf'
   * 1、通过toRaw获取原始对象, 在遍历数组的每一项进行track 依赖收集
  */
  // const obj = {
  //   name: "zhangsan"
  // }
  // const arr = reactive([obj])
  // const includesValue = arr.includes(obj)
  // 如果不重写 返回false, 因为includes内部是通过===比较的，reactive包裹之后的obj和arr内部的obj是不一样的
  // indexOf和lastIndexOf也一样
  // console.log(includesValue) //true 

  /**
   * vue3处理数组响应式的时候，重写了'push', 'pop', 'shift', 'unshift', 'splice'方法，延迟更新
  */

  const listData = [1,2,3,4]
  const listProxy = new Proxy(listData, {
    get(target, key, receiver) {
      console.log(target, key, receiver);
      
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      target[key] = value
      return Reflect.set(target, key, value, receiver)
    }
  })
  listProxy.push(5)
  console.log(listProxy);
  
</script>